/* if there is a problem with tradition delays - check if transition-delay does not collide with transition */

#start-page-connect-to-popular {
  width: 756px;
  height: 180px;
}

/* must be same as connectToCustomAPI for seamless transition */
#start-page-connect-to-popular.start-page-main-details-expanded {
  height: 470px;
}

#start-page-connect-to-popular > .start-page-connect-to-popular-navigation {
  margin-top: 60px;
  width: 50%;
  display: inline-block;
  cursor: pointer;
  margin-left: 0px;
}

#start-page-connect-to-popular-navigation-left {
  text-align: left;
  padding-left: 40px;
}

#start-page-connect-to-popular-navigation-right {
  text-align: right;
  padding-right: 84px;
}

#start-page-connect-to-popular-navigation-left.start-page-main-details-visible {
  padding-left: 0px;
}

#start-page-connect-to-popular-navigation-right.start-page-main-details-visible {
  padding-right: 40px;
}

#start-page-connect-to-popular-navigation-left:hover {
  padding-left: 4px;
}

#start-page-connect-to-popular-navigation-right:hover {
  padding-right: 44px;
}

@media (max-height: 700px) {
  #start-page-connect-to-popular {
    height: 130px;
  }

  /* must be same as connectToCustomAPI for seamless transition */
  #start-page-connect-to-popular.start-page-main-details-expanded {
    height: 400px;
  }
}

@media (max-height: 590px) {
  #start-page-connect-to-popular.start-page-main-details-expanded {
    height: 370px;
    margin-bottom: 0px;
  }

  #start-page-connect-to-popular > .start-page-connect-to-popular-navigation {
    margin-top: 15px;
  }

  #start-page-connect-to-popular-navigation-right {
    padding-right: 100px;
  }

  #start-page-connect-to-popular-navigation-right.start-page-main-details-visible {
    padding-right: 60px;
  }

  #start-page-connect-to-popular-navigation-right:hover {
    padding-right: 64px;
  }
}

@media (min-height: 880px) {
  #start-page-connect-to-popular.start-page-main-details-expanded {
    height: 520px;
  }
}

@media (max-width: 890px) {
  #start-page-connect-to-popular {
    width: 600px;
  }
}

@media (max-width: 670px) {
  #start-page-connect-to-popular {
    width: 500px;
  }

  #start-page-connect-to-popular-navigation-left {
    padding-left: 10px;
  }

  #start-page-connect-to-popular-navigation-right {
    padding-right: 10px;
  }
}
